import Link from "next/link";

import { SiteFooter } from "@/components/site-footer";

import { notFound } from "next/navigation";

import { revalidatePath } from "next/cache";

import { TRAVEL_CATEGORY } from "@stepping/types";

import { serverCaller } from "@/lib/trpc/server";

export const dynamic = "force-dynamic";

type Category = (typeof TRAVEL_CATEGORY)[number];

const SECTIONS: {

  category: Category;

  heading: string;

  note?: string;

  count: string;

  badge: string;

  empty: string;

  field: string;

  cta: string;

}[] = [

  {

    category: "hotel",

    heading: "Hotels",

    note: "The first stop for out-of-towners. Host hotels and places to stay near the sets.",

    count: "stays",

    badge: "STAY",

    empty:

      "Hotels will be listed here as events name their host hotels. Add a place to stay below.",

    field: "Hotel name",

    cta: "Add hotel",

  },

  {

    category: "event_center",

    heading: "Event Centers",

    count: "venues",

    badge: "VENUE",

    empty: "Venues will be listed here as they come on board. Add one that hosts sets below.",

    field: "Event center name",

    cta: "Add event center",

  },

  {

    category: "restaurant",

    heading: "Restaurants",

    count: "tables",

    badge: "EAT",

    empty: "Restaurants will be listed here soon. Add a plate worth the trip below.",

    field: "Restaurant name",

    cta: "Add restaurant",

  },

  {

    category: "mall",

    heading: "Shopping",

    count: "stops",

    badge: "SHOP",

    empty: "Shopping stops will be listed here soon. Add the closest one to the set below.",

    field: "Mall or shopping district",

    cta: "Add shopping",

  },

  {

    category: "attraction",

    heading: "Attractions",

    count: "sights",

    badge: "SEE",

    empty: "Attractions will be listed here soon. Add one worth seeing in town below.",

    field: "Attraction name",

    cta: "Add attraction",

  },

  {

    category: "entertainment",

    heading: "Entertainment",

    count: "spots",

    badge: "PLAY",

    empty: "Spots will be listed here soon. Add a lounge, club, or show near the set below.",

    field: "Entertainment spot",

    cta: "Add entertainment",

  },

  {

    category: "hospital",

    heading: "Hospitals",

    note: "Just in case. The nearest care to the sets.",

    count: "nearest",

    badge: "CARE",

    empty: "No hospital listed yet. Add the nearest one below, just in case.",

    field: "Hospital name",

    cta: "Add hospital",

  },

];

export default async function RoutePage({

  params,

}: {

  params: Promise<{ slug: string }>;

}) {

  const { slug } = await params;

  const caller = serverCaller();

  const city = await caller.city.bySlug({ slug });

  if (!city) notFound();

  const cityId = city.id;

  const grouped = await Promise.all(

    SECTIONS.map((s) => caller.travelPlace.list({ cityId, category: s.category })),

  );

  async function addPlace(formData: FormData) {

    "use server";

    const category = String(formData.get("category") ?? "");

    const name = String(formData.get("name") ?? "").trim();

    const address = String(formData.get("address") ?? "").trim();

    if (!name || !TRAVEL_CATEGORY.includes(category as Category)) return;

    await serverCaller().travelPlace.create({

      cityId: city!.id,

      category: category as Category,

      name,

      address: address || undefined,

    });

    revalidatePath(`/city/${slug}/road`);

  }

  return (

    <main className="mx-auto w-full max-w-3xl px-5 py-16 sm:px-8">

      <Link href={`/city/${slug}`} className="kicker hover:text-gold">

        ← {city.name}

      </Link>

      <p className="kicker mt-10 text-ash">The Road · {city.metroLabel}</p>

      <h1 className="display mt-3 text-7xl sm:text-8xl">The Road</h1>

      <p className="serif mt-5 max-w-xl text-xl text-ash">

        In town for a set or a weekender. Hotels first, then the event centers,

        food, shopping, attractions, entertainment, and the nearest hospital

        just in case. Everything you need to do {city.name} right.

      </p>

      {SECTIONS.map((section, idx) => {

        const places = grouped[idx];

        return (

          <section

            key={section.category}

            className="mt-16 border-t border-[var(--line)] pt-10"

          >

            <div className="flex items-end justify-between">

              <div>

                <p className="kicker text-gold">Stop {String(idx + 1).padStart(2, "0")}</p>

                <h2 className="display mt-2 text-4xl">{section.heading}</h2>

              </div>

              <span className="kicker text-ash">

                {String(places.length).padStart(2, "0")} {section.count}

              </span>

            </div>

            {section.note ? (

              <p className="serif mt-4 max-w-xl text-lg text-ash">{section.note}</p>

            ) : null}

            {places.length === 0 ? (

              <p className="serif mt-8 text-xl text-ash">{section.empty}</p>

            ) : (

              <ul className="mt-6">

                {places.map((p, i) => (

                  <li

                    key={p.id}

                    className="flex items-center gap-5 border-b border-[var(--line)] py-6"

                  >

                    <span className="kicker w-8 text-gold">

                      {String(i + 1).padStart(2, "0")}

                    </span>

                    <div className="flex-1">

                      <p className="display text-2xl text-bone sm:text-3xl">

                        {p.name}

                      </p>

                      {p.address ? (

                        <p className="kicker mt-1 text-ash">

                          {p.address.toUpperCase()}

                        </p>

                      ) : null}

                    </div>

                    <span className="kicker border border-[var(--line)] px-3 py-1">

                      {section.badge}

                    </span>

                  </li>

                ))}

              </ul>

            )}

            <form action={addPlace} className="mt-8 flex flex-col gap-3">

              <input type="hidden" name="category" value={section.category} />

              <input

                name="name"

                required

                placeholder={section.field}

                className="serif border-b border-[var(--line)] bg-transparent py-3 text-2xl text-bone outline-none placeholder:text-ash focus:border-gold"

              />

              <div className="mt-2 flex flex-wrap items-center gap-4">

                <input

                  name="address"

                  placeholder="Address (optional)"

                  className="kicker flex-1 border border-[var(--line)] bg-stage px-4 py-3 text-bone outline-none placeholder:text-ash focus:border-gold"

                />

                <button

                  type="submit"

                  className="kicker bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

                >

                  {section.cta}

                </button>

              </div>

            </form>

          </section>

        );

      })}

      <SiteFooter />

    </main>

  );

}